<!-- 添加/编辑 收件地址-->
<template>
	<div class="page-common">
		<nav-bar :back="1" :title="'选择难题分类'"></nav-bar>
    <div class="page-content">
      <div class="page-content-left">
        <!-- <van-sidebar v-model="activeKey" sidebar-width="'2.18rem'">
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
        </van-sidebar> -->
	      <div v-for="item in leftList" :key="item.Id" @click="getList(item.Id)">
          <div class="item-name" :class="[checkId===item.Id ? 'active' : '']">{{item.ClassName}}</div>
        </div>
      </div>
      <div class="page-content-right">
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="item in rightList" :key="item.Id" class="subitem-name" @click="getback(item.Id)">
            <div>{{item.ClassName}}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
	import {
		Toast,
		Dialog
	} from 'vant'

	import NavBar from '../../components/NavBar.vue'
	import {
		problem_api
	} from '../../api/index.js'
	export default {
		name: 'selectType',
		components: {
			NavBar,
		},
		data() {
			return {
				showPicker: false,
        leftList:[
        ],
        rightList:[
        ],
        checkId: '',
			}
		},
		mounted() {
		
		},
    activated() {
			this.getTypeList()
		},
		methods: {
		  getList(id) {
        this.checkId = id;
        this.rightList = this.leftList.filter(item => {
          return item.Id == id;
        })[0].children
				
      },
		  getback(id) {
        console.log(id,'id')
        this.$router.replace({
				name: 'addproblem',
				params: {
					id: id,
				},
			})
      },
      getTypeList() {
				problem_api.getproblemconsultclasslist((res) => {
					console.log('getAddressList', res)
         
					let list = [];
          res.forEach((item) => {
            if (item.ParentId == 0) {
              list.push(item)
            }
          })
          list.forEach(item => {
            item.children = [];
            res.forEach((jtem) => {
              if (item.Id == jtem.ParentId) {
                item.children.push(jtem)
              }
            })
          })
          this.leftList = list
          this.rightList = this.leftList.length ? this.leftList[0].children : [];
          this.checkId = this.leftList.length ? this.leftList[0].Id : '';
				})
			}
		},
	}
</script>
<style>
  .van-grid-item__content{
    background-color: #EDEDED;
    border-radius: 0.06rem;
    padding: 0;
    margin: 0.18rem 0.12rem;
    /* width: 1.08rem; */
    height: 0.56rem;
    line-height: 0.56rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<style scoped>
	.page-common {
		width: 100%;
		height: 100%;
		padding-top: 0.88rem;
		background-color: #fff;
	}

	.page-content {
		min-height: calc(100vh - 0.88rem);
    display: flex;
	}
  .page-content-left{
    width: 2.18rem;
    background-color: #F3F3F3;
    height: calc(100vh - 0.88rem);
    overflow-y: scroll;
  }
  .page-content-right{
    flex: 1;
    padding: 0.28rem 0.2rem;
    height: calc(100vh - 0.88rem);
    overflow-y: scroll;
    /* display: flex;
    flex-flow: row wrap;
    padding: 0.28rem 0.18rem;
    flex-direction: row; */
  }
  .item-name{
    width: 100%;
    height: 1.12rem;
    line-height: 1.12rem;
    font-size: 0.28rem;
    color: #000;
    padding: 0 0.32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-name.active{
    background-color: #FE4B4B;
    color: #fff;
  }
  .subitem-name{
    width: 1.08rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
	.form-item::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 8px;
    bottom: 0;
    left: 8px;
    border-bottom: 1px solid #E0E0E0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
	}
</style>
